<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Mednalytics</title>
    <!-- Iconic Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="../../vendors/iconic-fonts/font-awesome/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/flat-icons/flaticon.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins.css">
    <link rel="stylesheet" href="../../vendors/iconic-fonts/cryptocoins/cryptocoins-colors.css">
    <!-- Bootstrap core CSS -->
    <link href="../../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Page Specific Css (Datatables.css) -->
    <link href="../../assets/css/datatables.min.css" rel="stylesheet">
    <!-- jQuery UI -->
    <link href="../../assets/css/jquery-ui.min.css" rel="stylesheet">
    <!-- Page Specific CSS (Slick Slider.css) -->
    <link href="../../assets/css/slick.css" rel="stylesheet">
    <!-- Mednalytics styles -->
    <link href="../../assets/css/style.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="../../favicon.ico">

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="ms-body ms-aside-left-open ms-primary-theme ms-has-quickbar">
<!-- Setting Panel -->
<script src="../../assets/reuseCode/top.js"></script>
<!-- Body Content Wrapper -->
<div class="ms-content-wrapper">
    <div class="row">
        <div class="col-md-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb pl-0">
                    <li class="breadcrumb-item"><a href="../../index.html"><i class="material-icons">home</i> 主页</a></li>
                    <li class="breadcrumb-item">预约</li>
                    <li class="breadcrumb-item active" aria-current="page">预约列表</li>
                </ol>
            </nav>
            <div class="ms-panel">
                <div class="ms-panel-header ms-panel-custome">
                    <h6>预约清单</h6>
                    <a href="add-appointment.html" class="ms-text-primary">添加预约</a>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div id="aptable_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <div class="dataTables_length" id="aptable_length">
                                        <label>显示
                                            <select id="select1" name="aptable_length" class="custom-select custom-select-sm form-control form-control-sm"
                                                    @change="loadAppointments()">
                                            <option value="5">5</option>
                                            <option value="10">10</option>
                                            <option value="50">50</option>
                                        </select> 条/页
                                        </label>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-6">
                                    <div id="aptable_filter" >
                                        <label>
                                            <input type="search" class="form-control form-control-sm"
                                                   placeholder="输入关键词查询" >
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <table id="aptable" class="table w-100 thead-primary dataTable no-footer" role="grid" style="width: 1588px;">
                                        <thead>
                                        <tr role="row">
                                            <th style="width: 118px;">ID</th>
                                            <th style="width: 190px;">患者姓名</th>
                                            <th style="width: 83px;">年龄</th>
                                            <th style="width: 134px;">医生姓名</th>
                                            <th style="width: 101px;">科室</th>
                                            <th style="width: 140px;">预约日期</th>
                                            <th style="width: 209px;">预约时间</th>
                                            <th style="width: 127px;">症状</th>
                                            <th style="width: 108px;">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr role="row" class="odd" v-for="(appointment,index) in this.appointments" >
                                            <td v-html="index+1" >APT0001</td>
                                            <td v-html="appointment.name"><img src="../../assets/img/dashboard/patient-1.jpg">张飞</td>
                                            <td v-html="appointment.age">39</td>
                                            <td v-html="appointment.doctorName">澜</td>
                                            <td v-html="appointment.departmentName">内科</td>
                                            <td v-html="appointment.date">2019年11月</td>
                                            <td v-html="appointment.time">10:00am-12:00am</td>
                                            <td v-html="appointment.description">伤风感冒</td>
                                            <td >
                                                <a href="#mymodal" class="text-white"  data-toggle="modal" @click="editAppointment(appointment.id,index)">
                                                    <i class="fas fa-pencil-alt ms-text-primary mr-2" ></i>
                                                </a>
                                                <a href="#" class="text-white"><i class="far fa-trash-alt ms-text-danger mr-2" @click="deleteAppointment(appointment.id,appointment.name)"></i>
                                                </a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12 col-md-7">
                                    <div class="dataTables_paginate paging_simple_numbers" id="aptable_paginate">
                                        <ul class="pagination has-gap">
                                            <li class="paginate_button page-item " id="aptable_上一页" >
                                                <a href="#" aria-controls="aptable"
                                                   class="page-item page-link" @click="loadAppointments(pageInfo.prePage)">上一页</a>
                                            </li>
                                            <li class="paginate_button page-item " v-for="n in pageInfo.navigatepageNums">
                                                <a href="" aria-controls="aptable" data-dt-idx="1" tabindex="0"
                                                   class="page-link"  v-on:click.prevent="loadAppointments(n)"
                                                 v-bind:class="{'bg-secondary text-light':n==pageInfo.pageNum}" v-text="n">1</a>
                                            </li>
                                            <li class="paginate_button page-item " id="aptable_下一页">
                                                <a href="#" aria-controls="aptable" data-dt-idx="3" tabindex="0"
                                                   class="page-item page-link" @click.prevent="loadAppointments(pageInfo.nextPage)">下一页</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODALS 编辑预约信息信息-->
<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" style=" padding-right: 17px;">
    <div class="modal-dialog ms-modal-dialog-width">
        <div class="modal-content ms-modal-content-width">
            <div class="modal-header  ms-modal-header-radius-0">
                <h4 class="modal-title text-white">修改预约</h4>
                <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">x</button>

            </div>
            <div class="modal-body p-0 text-left">
                <div class="col-xl-12 col-md-12">
                    <div class="ms-panel ms-panel-bshadow-none">
                        <div class="ms-panel-header">
                            <h6>病人信息:</h6>
                        </div>
                        <div class="ms-panel">
                            <div class="ms-panel-body">
                                <form class="needs-validation"  @submit.prevent="submitAppointment">
                                    <div class="form-row"  >
                                        <div class="col-md-3 mb-3">
                                            <label >患者姓名</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control info" id="name" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label  >患者年龄</label>
                                            <div class="input-group">
                                                <label >
                                                    <input type="text" class="form-control info" id="age" >
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label>性别</label>
                                            <ul class="ms-list d-flex">
                                                <li class="ms-list-item pl-0">
                                                    <label class="ms-checkbox-wrap">
                                                        <input type="radio" name="sex" value="男" >
                                                        <i class="ms-checkbox-check"></i>
                                                    </label>
                                                    <span> 男 </span>
                                                </li>
                                                <li class="ms-list-item">
                                                    <label class="ms-checkbox-wrap">
                                                        <input type="radio" name="sex" value="女" >
                                                        <i class="ms-checkbox-check"></i>
                                                    </label>
                                                    <span> 女 </span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <label  >患者电话</label>
                                            <div class="input-group">
                                                <input type="text" class="form-control info" id="phone" >
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label >预约科室名称</label>
                                            <div class="input-group">
                                                <select id="selectDepartment" class="form-control info" @change="loadDoctors()"  >
                                                </select>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-3 mb-3">
                                            <label >预约医生</label>
                                            <div class="input-group">
                                                <select class="form-control info"   id="selectDoctor">
                                                    <option value="" selected="selected" id="">请选择---</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label >预约时间(7天内)</label>
                                            <div class="input-group">
                                                <input type="datetime-local" class="form-control" id="date" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-md-6 mb-2">
                                            <label>症状描述(必填)</label>
                                            <div class="input-group">
                                                <textarea class="form-control info"  rows="3" id="description" ></textarea>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="">
                                            <span>
                                                <button class="btn btn-warning mt-4 d-inline w-20" type="button" @click="clearAll()">重新填写</button>
                                            <button class="btn btn-primary mt-4 d-inline w-20"  type="submit" id="save" >确认修改</button>
                                            </span>

                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Reminder Modal -->
<script src="../../assets/reuseCode/reminderModal.js"></script>
<!-- Notes Modal -->
<script src="../../assets/reuseCode/notesModal.js"></script>
<!-- Modal -->
<script src="../../assets/reuseCode/modal.js"></script>
<!-- SCRIPTS -->
<!-- Global Required Scripts Start -->

<script src="../../assets/js/jquery-3.3.1.min.js"></script>

<script src="../../assets/js/popper.min.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script src="../../assets/js/perfect-scrollbar.js"></script>
<script src="../../assets/js/jquery-ui.min.js"></script>
<!-- Global Required Scripts End -->
<!-- Page Specific Scripts Start -->
<script src="../../assets/js/slick.min.js"></script>
<script src="../../assets/js/moment.js"></script>
<script src="../../assets/js/jquery.webticker.min.js"></script>
<!-- Page Specific Scripts Finish -->

<!-- Page Specific Scripts Start -->
<!--<script src="../../assets/js/datatables.min.js"></script>-->
<!--<script src="../../assets/js/data-tables.js"> </script>-->
<!-- Mednalytics core JavaScript -->
<script src="../../assets/js/framework.js"></script>
<!-- Settings -->
<script src="../../assets/js/settings.js"></script>
<!--表格数据-->
<script type="text/javascript" src="../../assets/js/appointment/appointment-list.js"></script>

</body>
</html>
